<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
  
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome Home</title>
<!-- JqueryUI -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/jquery-ui.css">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
<!-- Awesome font icons -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/font-awesome.min.css" media="screen">
<!-- Owlcoursel -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/owl-coursel/owl.carousel.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/owl-coursel/owl.transitions.css">
<!-- Magnific-popup -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/magnific-popup/magnific-popup.css">
<!-- Style -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/style.css" media="screen">
<!-- Fw -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/fw.css" media="screen">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/mystyle.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/css.css" />
</head>
<body class="bg-m">

 

<div class="preloader">
	<i class="fa fa-spinner"></i>
</div>
<%-- <%@include file="/WEB-INF/view/public/header.jsp" %>  --%>
<jsp:include page="public/header.jsp"></jsp:include>
<!-- Banner -->
	<!-- 开始加载地址信息，做成类淘宝的ul -->
	<div class="Caddress">
		<div class="open_new">
			<button class="open_btn" id="use_new_address_btn">使用新地址</button>
		</div>
		
			<div class="add_mi">
				<p style="border-bottom:1px dashed #ccc;line-height:28px;">浙江杭州(爸爸收)</p>
				<p>萧山 北干 明怡花苑53幢3单元 13735683918</p>
			</div>
		
	</div>

	<div class="shopping_content">
		<div class="shopping_table">
			<table border="1" bordercolor="#cccccc" cellspacing="0" cellpadding="0" style="width: 100%; text-align: center;">
				商品列表抬头
				<tr>
					<th align="center">序号</th>
					<th align="center">商品图片</th>
					<th align="center">商品名称</th>
					<th align="center">商品价格</th>
					<th align="center">商品数量</th>
					<th align="center">商品操作</th>
				</tr>
				
				<!-- 代码后面是需要优化的 -->
				<!-- 循环输出商品内容 -->
				<c:forEach items="${orderItems}" var="orderItemVO" varStatus="status" >
					<tr>
						<td align="center">
							${status.index+1 }
						</td>
						<td align="center">
							<a><img width="120" height="100" src="${orderItemVO.value.img }" /></a>
						</td>
						<td id="aaaa">
						<!-- 商品名称 -->
							<input type="hidden" id=${orderItemVO.key} value=${orderItemVO.key}>
							<span id="{orderItemVO.key}">${orderItemVO.value.name }</span>
						</td>
						<td>
							<span class="span_momey">${orderItemVO.value.price }</span>
						</td>
						<td>
							<button class="btn_reduce" id="minus_foods_in_orderInfo">-</button>
							<input class="momey_input" type="" name="" id="food_total_in_order" value="${orderItemVO.value.total }" disabled="disabled" />
							<button class="btn_add" id="plus_foods_in_orderInfo">+</button>
						</td>
						<td>
							<button class="btn_r" id="remove_food_in_orderInfo">删除</button>
						</td>
					</tr>
				</c:forEach>
				<!-- 循环输出商品内容 结束 -->
			</table>
			<div class="" style="width: 100%; text-align: right; margin-top: 10px;">
				<div class="div_outMumey" style="float: left; background-color: red">
					总价： <span class="out_momey">${totalMoney}</span>
				</div>
				<button id="pay_from_orderInfo" class="btn_closing">结算</button>
			</div>
		</div>
	</div>

		<!--
        	作者：z@163.com
        	时间：2016-03-01
        	描述：shade 遮罩层
        -->
		<div class="shade">
		</div>
		
		<!-- 新增收货地址：可以由 jquery -->

		<div class="shade_content">
			<div class="col-xs-12 shade_colse">
				<button id="button_to_close_address_info">x</button>
			</div>
			<div class="nav shade_content_div">
				<div class="col-xs-12 shade_title">
					新增收货地址
				</div>
				<div class="col-xs-12 shade_from">
					<form action="" method="post">
						<div class="col-xs-12">
							<span class="span_style" id="">地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;区</span>
							<input class="input_style" type="" name="" id="region" value="" placeholder="&nbsp;&nbsp;请输入您的所在地区" />
						</div>
						<div class="col-xs-12">
							<span class="span_style" id="">详细地址</span>
							<input class="input_style" type="" name="" id="address" value="" placeholder="&nbsp;&nbsp;请输入您的详细地址" />
						</div>
						<div class="col-xs-12">
							<span class="span_style" id="">邮政编号</span>
							<input class="input_style" type="" name="" id="number_this" value="" placeholder="&nbsp;&nbsp;请输入您的邮政编号" />
						</div>
						<div class="col-xs-12">
							<span class="span_style" class="span_sty" id="">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</span>
							<input class="input_style" type="" name="" id="name_" value="" placeholder="&nbsp;&nbsp;请输入您的姓名" />
						</div>
						<div class="col-xs-12">
							<span class="span_style" id="">手机号码</span>
							<input class="input_style" type="" name="" id="phone" value="" placeholder="&nbsp;&nbsp;请输入您的手机号码" />
						</div>
						<div class="col-xs-12">
							<input class="btn_remove" type="button" id="" onclick="javascript:onclick_close();" value="取消" />
							<input type="submit" class="sub_set" id="sub_setID" value="提交" />
						</div>
					</form>
				</div>
			</div>
		</div>

<!-- jQuery -->
<script src="${pageContext.request.contextPath}/js/jquery/jquery-2.2.4.min.js"></script>
<!-- JqueryUI -->
<script src="${pageContext.request.contextPath}/js/jquery/jquery-ui.js"></script>
<!-- Bootstrap -->
<script src="${pageContext.request.contextPath}/js/bootstrap/bootstrap.min.js"></script>
<!-- Owl-coursel -->
<script src="${pageContext.request.contextPath}/js/owl-coursel/owl.carousel.js"></script>
<!-- Magnific-popup -->
<script src="${pageContext.request.contextPath}/js/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- Script -->
<script src="${pageContext.request.contextPath}/js/script.js"></script>
<script src="${pageContext.request.contextPath}/js/orderInfo.js"></script>

</body>
</html>